<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="d-flex"
      mode="horizontal"
      :router="isRouter"
      type="flex"
    >
      <el-menu-item index="/" class="mr-auto">博客网站</el-menu-item>
      <el-menu-item index="/home">{{ $t("header.home") }}</el-menu-item>
      <el-menu-item index="/archive">{{ $t("header.archive") }}</el-menu-item>
      <el-menu-item index="/about">{{ $t("header.about") }}</el-menu-item>
      <el-menu-item index="/version">{{ $t("header.version") }}</el-menu-item>
      <el-submenu index="lang">
        <template slot="title">{{ $t("header.language") }}</template>
        <el-menu-item @click="toggleLang('zh')">{{
          $t("header.chinaese")
        }}</el-menu-item>
        <el-menu-item @click="toggleLang('en')">{{
          $t("header.english")
        }}</el-menu-item>
      </el-submenu>
    </el-menu>
    
  </div>
  
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      activeIndex: "/home",
      isRouter: true,
    };
  },
  methods: {
    toggleLang(lang) {
      if (lang === "zh") {
        localStorage.setItem("locale", "zh");
        this.$i18n.locale = localStorage.getItem("locale");
        this.$message({
          message: "切换为中文！",
          type: "success",
        });
      } else if (lang === "en") {
        localStorage.setItem("locale", "en");
        this.$i18n.locale = localStorage.getItem("locale");
        this.$message({
          message: "Switch to English!",
          type: "success",
        });
      }
    },
  },
  mounted(){
    this.activeIndex = this.$route.path; 
  }
};
</script>
<style>
el-menu-item {
  padding-left: 50px;
}
</style>
